<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>详情页</title>
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3266421_50h0322wnow.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3423448_tl1swu58bmo.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_3423448_p9rve5la3xp.css">
    <link rel="stylesheet" href="../css/detail.css">
    <link rel="stylesheet" href="../css/retset.css">
    <style>

    </style>
</head>

<body>
    <div id="top">
        <div class="top-1">
            <ul class="top-title">
                <li><a href="../html/xiaomi index.html">小米商城</a></li>
                <li><a href="">MIUI</a></li>
                <li><a href="">LOT</a></li>
                <li><a href="">云服务</a></li>
                <li><a href="">天星数科</a></li>
                <li><a href="">有品</a></li>
                <li><a href="">小爱开放平台</a></li>
                <li><a href="">企业团购</a></li>
                <li><a href="">资质证照</a></li>
                <li><a href="">协议规则</a></li>
                <li><a href="">下载App</a>
                    <div class="xiaomiApp"><img src="" alt=""></div>
                </li>
                <li><a href="">Select Location</a></li>
            </ul>
            <dl>
                <dt>
                <dd class="noLogin" style="display: none;">
                    <a href="../html/log.html">登录</a>
                    <a href="../html/reg.html">注册</a>
                </dd>
                <dd class="login" style="display: none;">xx</dd>
                <dd class="loginOut">退出账号</dd>

                <dd>
                    <a href="">消息通知</a>
                </dd>
                <dd class="cart">
                    <i class="iconfont icon-gouwuchekong"></i>
                    <!-- <a class="icon-gouwuchekong"></span> -->
                    <a class="add" onclick="goCart()">购物车(0)</a>
                    <div class="hide1">购物车中还没有商品赶快选购吧!</div>
                </dd>

                </dt>
            </dl>

        </div>

    </div>
    <div id="site-header">
        <div class="container">
            <em><img src="https://s02.mifile.cn/assets/static/image/logo-mi2.png" alt=""></em>
            <ul>
                <li>
                    <a href="">Xiaomi手机</a>
                    <div class="hide">
                        <div class="box">
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/88ae9b85c5f8fbdae2ea98d58a045e1e.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/02ac31f8d3848f71617e074e8e50879e.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/075d45f17b32b39c98be850a5592bbee.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                            <div class="matter">
                                <a href=""><img
                                        src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/8cad77bda138fd94eadbc2ddfced7c56.png?thumb=1&w=200&h=138&f=webp&q=90"
                                        alt=""></a>
                                <p><a href="">小米12Pro</a></p>
                                <span><a href="">4699元起</a></span>
                            </div>
                        </div>
                    </div>
                </li>
                <li><a href="">Redmi红米</a></li>
                <li><a href="">电视</a></li>
                <li><a href="">笔记本</a></li>
                <li><a href="">平板</a></li>
                <li><a href="">家电</a></li>
                <li><a href="">路由器</a></li>
                <li><a href="">服务</a></li>
                <li><a href="">社区</a></li>
            </ul>
            <div class="input">
                <p><a class="input-1 iconfont icon-sousuo" href=""></a></p>
                <input class="input-2" type="search" placeholder="小米笔记本">
                <ul class="result-list">
                    <li><a href="#" style="text-align: start;">全部商品</a></li>
                    <li><a href="#" style="text-align: start;">小米11</a></li>
                    <li><a href="#" style="text-align: start;">小米10S</a></li>
                    <li><a href="#" style="text-align: start;">小米笔记本</a></li>
                    <li><a href="#" style="text-align: start;">小米手机</a></li>
                    <li><a href="#" style="text-align: start;">黑鲨4</a></li>
                    <li><a href="#" style="text-align: start;">空调</a></li>
                </ul>

            </div>
        </div>

    </div>
    <div id="nav" style="width:100%; background-color: #f5f5f5;height: 40px;">
        <div class="nav_1" style="background-color: #f5f5f5;
        width: 1226px; margin:auto; font-size:12px;
        line-height: 40px;color: #757575;">
            <p>
                <a href="">首页</a>
                >
                <a href="">全部结果</a>
                >
                <a href="">小米手机</a>
            </p>
        </div>
    </div>
    <div id="nav_2" style="width: 100%;background-color: white;height: 96px;">
        <ul class="nav_2_1" style="width:1226px;margin: auto;display: flex;padding: 36px 0;height: 20px;">
            <li style="color: #b0b0b0;">分类:</li>
            <li><a href="">全部</a></li>
            <li><a href="">红米手机</a></li>
            <li><a href="">小米手机</a></li>
            <li><a href="">黑鲨手机</a></li>
        </ul>
    </div>

    <div id="login-notic">
        <div class="container">小米为发烧而生小米你的选择
            <a class="login" data-params="&quot;&quot;">Mi</a>
            <a class=""></a>
        </div>
    </div>

    <div id="login-main">
        <div class="login-list">

            <div class="left-img">
                <img src="" alt="">
                <div class="mask"></div>
            </div>
            <div class="xbox">
                <img src="" alt="" class="ximg">
            </div>


            <div class="right-containt">
                <div class="main_1">
                    <h2 class="name"></h2>
                    <em>「新品预售中，订金100元抵200元」</em>
                    <p class="type"></p>
                    <p class="des" style="color: #ff6700;"></p>
                    <div class="booking-info">
                        <div class="left">
                            <div class="left-box">
                                <div class="price-box">
                                    <span class="name-a">订金</span>
                                    <span class="price-x"><em>￥</em>100</span>
                                    <span class="tag">抵200元</span>
                                </div>
                                <div class="markerprice-box">
                                    <span class="name-x">活动立减</span>
                                    <span class="price-y">￥200</span>
                                </div>
                            </div>
                        </div>
                        <div class="right">
                            <div class="time-box">
                                <span class="tips">距618活动</span>
                                <span id="a">
                                    <!-- <span class="day">6天</span>
                                    <span class="hour">10</span>:
                                    <span class="minite">33</span>: -->
                                    <!-- <span class="second">04</span> -->
                                </span>
                            </div>
                        </div>
                    </div>
                    <div class="where-box">
                        <div class="where-pap">
                            <ul>
                                <li>
                                    北京
                                </li>
                                <li>
                                    北京市区
                                </li>
                                <li>
                                    清河街道
                                </li>
                                <li>
                                    <a href="">修改</a>
                                </li>
                            </ul>
                            <p>现货预售<a>尾款支付后3日内发货</a></p>
                        </div>
                    </div>
                    <div class="banbeng">
                        <h3>选择版本</h3>
                        <ul>
                            <li>
                                <a href="">4CB+128GB</a>
                            </li>
                            <li>
                                <a href="">8GB+256GB</a>
                            </li>
                        </ul>
                    </div>
                    <div class="selset-color">
                        <h3>选择颜色</h3>
                        <ul>
                            <li>
                                <a href="">暗影黑</a>
                            </li>
                            <li>
                                <a href="">深空蓝</a>
                            </li>
                        </ul>
                    </div>
                    <div class="where-sum">
                        <div class="where-pap">

                            <p>现货预售<a>尾款支付后3日内发货</a></p>
                            <p class="price-sum-">
                                <span class="sum_l" style="font-size: 25px;
                                color: #ff6700;">总计：</span>
                                <span class="price"></span>
                            </p>
                        </div>
                    </div>
                    <div class="main_2">
                        <button class="add" onclick="addToCart()">加入购物车</button>
                        <button class="come" onclick="goCart()">进入购物车</button>
                    </div>
                    <div class="img-www">
                        <!-- <img src="../img/小米经营.png" alt=""> -->
                    </div>

                </div>


            </div>
        </div>
    </div>


    <div id="login-space">
        <div class="space-price">
            <h3>价格说明</h3>
            <img src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/43e2954feb6d1b108438481f1d5b0bd3.png" alt="">
        </div>

    </div>




    <div id="footer">
        <div class="footer-service">
            <ul class="list-service clearfix">
                <li class="first"><a href="" class="iconfont icon-weixiubaoyang">预约维修项目</a></li>
                <li><a href="" class="iconfont icon-7tianbaotuihuan"></a>7天无理由退货</a></li>
                <li><a href="" class="iconfont icon-tianbaotui">15天免费换货</a></li>
                <li><a href="" class="iconfont icon-baoyou">满69元包邮</a></li>
                <li><a href="" class="iconfont icon-dizhi">520余家售后网点</a></li>
            </ul>
        </div>
        <div class="footer-links">
            <dl class="col-links">
                <dt>帮助中心</dt>
                <dd style="color: #757575;margin: 10px 0 0;font-size: 12px;"><a href="">账户管理</a></dd>
                <dd><a href="">购物指南</a></dd>
                <dd><a href="">订单操作</a></dd>
            </dl>
            <dl class="col-links">
                <dt>服务支持</dt>
                <dd><a href="">售后政策</a></dd>
                <dd><a href="">自助服务</a></dd>
                <dd><a href="">相关下载</a></dd>
            </dl>
            <dl class="col-links">
                <dt>线下门店</dt>
                <dd><a href="">小米之家</a></dd>
                <dd><a href="">服务网点</a></dd>
                <dd><a href="">授权体验店/专区</a></dd>
            </dl>
            <dl class="col-links">
                <dt>关于小米</dt>
                <dd><a href="">了解小米</a></dd>
                <dd><a href="">加入小米</a></dd>
                <dd><a href="">投资者关系</a></dd>
                <dd><a href="">企业社会责任</a></dd>
                <dd><a href="">廉洁举报</a></dd>
            </dl>
            <dl class="col-links">
                <dt>关注我们</dt>
                <dd><a href="">新浪微博</a></dd>
                <dd><a href="">官方微信</a></dd>
                <dd><a href="">联系我们</a></dd>
                <dd><a href="">公益基金会</a></dd>
            </dl>
            <dl class="col-links">
                <dt>特色服务</dt>
                <dd><a href="">F码通道</a></dd>
                <dd><a href="">礼物码</a></dd>
                <dd><a href="">防伪查询</a></dd>
            </dl>
            <div class="col-contact">
                <p class="phone">400-100-5678</p>
                <p>8:00-18:00（仅收市话费）</p>
                <a rel="nofollow" class="btn btn-line-primary btn-small J_contactBtn"> <i class="iconfont icon-duanxin"
                        style="color: #ff6700;"></i> 人工客服 </a>
                <div class="follow">
                    关注小米
                    <a href="https://weibo.com/xiaomishangcheng" target="_blank" class="wb"></a>
                </div>
            </div>
        </div>
    </div>
    <div id="site-info">
        <div class="container">
            <div class="logo ir"></div>
            <div class="info-text">
                <p class="sites"><a rel="nofollow" href="//www.mi.com/index.html" target="_blank">小米商城</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//www.miui.com/" target="_blank">MIUI</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//home.mi.com/index.html" target="_blank">米家</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.miliao.com/" target="_blank">米聊</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//www.duokan.com/" target="_blank">多看</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//game.xiaomi.com/" target="_blank">游戏</a>
                    <span class="sep">|</span> <a rel="nofollow"
                        href="//b.mi.com/?client_id=180100031058&amp;masid=17409.0358" target="_blank">政企服务</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//xiaomi.tmall.com/" target="_blank">小米天猫店</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//privacy.mi.com/all/zh_CN/"
                        target="_blank">小米集团隐私政策</a>
                    <span class="sep">|</span> <a rel="nofollow"
                        href="//cdn.cnbj1.fds.api.mi-img.com/mi-mall/f516fe9e2c01.html" target="_blank">小米公司儿童信息保护规则</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//m.mi.com/support/module?id=63&amp;headless=1"
                        target="_blank">小米商城隐私政策</a>
                    <span class="sep">|</span> <a rel="nofollow" href="//www.mi.com/aptitude/list?id=62"
                        target="_blank">小米商城用户协议</a>
                    <span class="sep">|</span><a rel="nofollow" href="//static.mi.com/feedback/"
                        target="_blank">问题反馈</a>
                    <span class="sep">|</span> <a rel="nofollow" href="javascript:void(0);"
                        class="J_siteGlobalRegion">Select Location</a>
                </p>
                <p class="sites"><a rel="nofollow" href="http://www.mi.com/beihu" target="_blank">北京互联网法院法律服务工作站</a>
                    <span class="sep">|</span> <a rel="nofollow" href="http://www.cca.org.cn/"
                        target="_blank">中国消费者协会</a> <span class="sep">|</span>
                    <a rel="nofollow" href="http://www.bj315.org/" target="_blank">北京市消费者协会</a>
                </p>
                <p>
                    ©
                    <a href="javascript:;" target="_blank" title="mi.com">mi.com</a> 京ICP证110507号
                    <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow">京ICP备10046444号</a>
                    <a rel="nofollow" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=11010802020134"
                        target="_blank">京公网安备11010802020134号</a> <a href="//www.mi.com/culture-license/"
                        target="_blank">京网文[2020]0276-042号</a> <br> <a href="//www.mi.com/medical/record/"
                        target="_blank">（京）网械平台备字（2018）第00005号</a> <a href="//www.mi.com/medical/qualification/"
                        target="_blank">互联网药品信息服务资格证 (京)-非经营性-2014-0090</a> <a href="//www.mi.com/business-license/"
                        target="_blank">营业执照</a> <a href="//www.mi.com/medical/list/" target="_blank">医疗器械质量公告</a> <br>
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/e0c7d4cf3b7cd88de10196e30c92e020.png"
                        target="_blank">增值电信业务许可证</a>&nbsp;网络食品经营备案 京食药网食备202010048 &nbsp;
                    <a href="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/c6859168166651511897f54fa1047fe3.png"
                        target="_blank">食品经营许可证</a> <br>
                    违法和不良信息举报电话：171-5104-4404&nbsp;<a href="https://www.mi.com/intellectual"
                        target="_blank">知识产权侵权投诉</a>&nbsp;本网站所列数据，除特殊说明，所有数据均出自我司实验室测试
                </p>
            </div>
            <div class="info-links"><a rel="nofollow"
                    href="//privacy.truste.com/privacy-seal/validation?rid=4fc28a8c-6822-4980-9c4b-9fdc69b94eb8&amp;lang=zh-cn"
                    target="_blank"><img rel="nofollow" src="//i1.mifile.cn/f/i/17/site/truste.png"
                        alt="TRUSTe Privacy Certification"></a> <a rel="nofollow"
                    href="//search.szfw.org/cert/l/CX20120926001783002010" target="_blank"><img rel="nofollow"
                        src="//s01.mifile.cn/i/v-logo-2.png" alt="诚信网站"></a> <a
                    id="_xinchacharenzheng_cert_vip_kexinweb" rel="nofollow"
                    href="//xyt.xinchacha.com/pcinfo?sn=523009637759455232&amp;certType=6" target="_blank"><img
                        rel="nofollow" src="//xyt.xinchacha.com/img/icon/icon3.png" alt="可信网站"></a> <a rel="nofollow"
                    href="//www.mi.com/service/buy/commitment/" target="_blank"><img rel="nofollow"
                        src="//i8.mifile.cn/b2c-mimall-media/ba10428a4f9495ac310fd0b5e0cf8370.png"
                        alt="诚信经营 放心消费"></a><a rel="nofollow"
                    href="https://webcert.cnmstl.net/cert/grade?sn=3af21034e35011eab3ea00163e068ceb"
                    class="safe-auth J_safeAuth                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              "><img
                        rel="nofollow"
                        src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/f1ee261b96ae71e845efba398efeca02.png"
                        class="img1"><img rel="nofollow"
                        src="https://cnbj1.fds.api.xiaomi.com/b2c-misite-activity/1cf9235c7dd1b1f8bf40721bfa8cb793.png"
                        class="img2"></a></div>
            <div class="slogan ir">探索黑科技，小米为发烧而生</div>
            <div class="slogan-bottom">让全球每个人都可以享受科技带来的美好生活</div>
        </div>
    </div>

    <script src="../js/tools.js"></script>
    <script>
        // 判断用户是否登录
        const user = localStorage.getItem('login_user');
        if(user) {
            getEle('.login').style.display = 'block' ;
            getEle('.login').innerHTML = user ;
        } else {
            getEle('.noLogin').style.display = 'block' ;
        }

        
       // 退出账号
        // 分析：不仅仅是跳转到登录，而是需要把登录信息给删除
        const loginOut = document.querySelector('.loginOut')
        // console.log(loginout);

        loginOut.addEventListener('click' , function() {
            // 先删除登录信息
            removeCookie('login_user') ;
            // 再跳转到登录
            location.href = './log.html' ;
        })

        // 切割拿到它得id
        const search = location.search.split('?')[1];
        console.log(search);//得到得是id=几，如id=1
        const id = search.split('=')[1];
        console.log(id);//得到得是你得id

        // 通过接口把数据库中得数据传到前端页面
        ajax({
            type: 'post',
            data: {
                id
            },
            path: '../php/detail.php',
            success: res => {
                console.log(res);
                const { status, msg, data } = res;
                console.log(data);//true,数据请求成功，以及数据库中传来得数据data
                // 根据上边得标签将数据库中得数据传到标签中在页面中显示
                $('.name').innerHTML = data.title;
                $('.des').innerHTML = data.des;
                $('.left-img img').src = data.img;
                $('.xbox img').src = data.img;
                $('.price').innerHTML = data.price;
                $('.type').innerHTML = data.type;
            }
        })

        //做图片得放大镜效果
        //mbox指小盒子，xbox指放大后所显示的大盒子，ximg指大盒子中的图片，mask指橙色的遮罩层
        let mbox = document.querySelector('.left-img');
        let xbox = document.querySelector('.xbox');
        let ximg = document.querySelector('.ximg');
        let mask = document.querySelector('.mask');
        //给mbox添加鼠标经过事件
        mbox.addEventListener('mouseover', function () {
            //当鼠标经过mbox时，mask和xbox显示出来
            mask.style.display = 'block';
            xbox.style.display = 'block';
            //给mbox添加鼠标移动事件
            mbox.addEventListener('mousemove', move);

            function move(e) {
                //计算鼠标在mbox内的坐标。为了让鼠标居于mask中心，再各减去mask的宽高一半
                let left = e.pageX - mbox.offsetLeft - mask.offsetWidth / 2;
                let top = e.pageY - mbox.offsetTop - mask.offsetHeight / 2;
                //计算显示比率，ximg最大移动距离/mask最大移动距离
                let ratio = (ximg.offsetWidth - xbox.offsetWidth) / (mbox.offsetWidth - mask.offsetWidth);
                //把left、top限制在mbox的范围中
                if (left <= 0) {
                    left = 0;
                } else if (left >= mbox.offsetWidth - mask.offsetWidth) {
                    left = mbox.offsetWidth - mask.offsetWidth;
                }
                if (top <= 0) {
                    top = 0;
                } else if (top >= mbox.offsetHeight - mask.offsetHeight) {
                    top = mbox.offsetHeight - mask.offsetHeight;
                }
                mask.style.left = left + 'px';
                mask.style.top = top + 'px';
                //mask的移动方向与ximg的移动方向刚刚好相反，试一下把 '-' 去掉即可明白。
                //且ximg移动距离为mask的ratio倍。
                ximg.style.left = '-' + left * ratio + 'px';
                ximg.style.top = '-' + top * ratio + 'px';
            }
        })
        //给mbox添加鼠标离开事件
        mbox.addEventListener('mouseout', function () {
            mask.style.display = 'none';
            xbox.style.display = 'none';
        })


        // 618活动倒计时
        showTime('a', new Date('2022-6-18 0:0:0'));

        let t = setInterval(function () {
            showTime('a', new Date('2022-6-18 0:0:0'));
        }, 1000)

        function showTime(id, futureTime) {
            let oH1 = document.getElementById(id)
            // 将来的某一个时间
            let future = new Date(futureTime);
            // 现在的时间
            let now = new Date();
            // 时间相减，得到的是毫秒数
            let gap = parseInt((future - now) / 1000);
            console.log(gap);
            // 判断
            if (gap <= 0) {
                oH1.innerHTML = '活动结束'
                // 清除定时器
            }

            else {
                // 判断有多少天
                let d = parseInt(gap / 3600 / 24)
                // 判断有多少小时
                let h = parseInt(gap / 3600 % 24);
                // 判断有多少分钟
                let m = parseInt(gap / 60 % 60);
                // 判断有多少秒
                let s = gap % 60;
                oH1.innerHTML = d + '天' + h + ":" + m + ":" + s;
            }
        }

        // 加入购物车  

        function addToCart() {

            if (user) {
                ajax({
                    type: 'post',
                    data: {
                        username: user,
                        id,
                        num: 1
                    },
                    path: '../php/addToCart.php',
                    success: res => {
                        console.log(res);
                        alert(res.msg);
                    }
                })
            } else {
                // 如果没有登录就跳转到登录页面,登录成功以后跳转回来
                const url = location;
                location.href = 'log.html?historyURL=' + url;
            }




        }

        // 判断是否可以进入购物车
        function goCart() {
            if (user) {
                location.href = './cart.html'
            } else {
                location.href = 'log.html?historyURL=' + url;
            }
        }
    </script>
</body>

</html>